<script setup>
import { onMounted } from 'vue'

import markerIcon from '@/assets/icon/marker.png'

onMounted(() => {
  var map = new BMapGL.Map('container') // 创建地图实例
  var center = new BMapGL.Point(120.143514, 30.269521) // 创建点坐标
  map.centerAndZoom(center, 17) // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

  var point = new BMapGL.Point(120.143514, 30.269521)
  // var marker = new BMapGL.Marker(point) // 创建标注
  // map.addOverlay(marker) // 将标注添加到地图中

  var myIcon = new BMapGL.Icon(markerIcon, new BMapGL.Size(50, 50))
  // 创建标注对象并添加到地图
  var marker = new BMapGL.Marker(point, { icon: myIcon })
  map.addOverlay(marker)

  marker.addEventListener('click', function (event) {
    //解构赋值
    const { lat, lng } = event.latLng

    var point = new BMapGL.Point(lng, lat)
    map.setCenter(point)
  })

  function myFun(result) {
    console.log(result)

    var cityName = result.name
    map.setCenter(cityName)
  }
  var myCity = new BMapGL.LocalCity()
  myCity.get(myFun)
})
</script>
<template>
  <div id="container"></div>
</template>
<style lang="less" scoped>
#container {
  width: 100%;
  height: calc(100vh - 50px);
}
</style>
